<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>
		<script type="text/javascript" src="layui/layui.js"></script>
  </head>
  <body>
    <script type="text/html" id="headToolBar">
      <button class="layui-btn layui-btn-sm" lay-event="createRole">
      <i class="layui-icon layui-icon-add-circle"></i>添加角色</button>
    </script>
    
    <script type="text/html" id="rowToolBar">
      <button class="layui-btn layui-btn-primary layui-btn-xs">
          <i class="layui-icon layui-icon-set-fill"></i> 设置权限</button>
      <button class="layui-btn layui-btn-xs" lay-event="updateRole" >
          <i class="layui-icon layui-icon-edit"></i> 编辑</button>
      <button class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="deleteRole">
        <i class="layui-icon layui-icon-delete"></i> 删除</button>
    </script>
    
    <table class="layui-hide" id="testTable" lay-filter="test">
      
    </table>
    <script>
    layui.use(['layer','table'],function(){
      var layer=layui.layer,
      table=layui.table
      $=layui.$;
      var pData;
      table.render({//渲染
        elem:'#testTable',//根据id找表格
        height:400,
        toolbar:'#headToolBar',
        url:'http://stuapi.ysdjypt.com/api/GetRolesLayUI',
        method:'post',
        where:{'token':'23d66d84-fae1-45d5-bd07-b694662fe579'},//参数
        title:'用户表',
        page:true,//页
        cols:[
          [    
            {  
               field:'Id',
              title:'角色ID',
            },{
               field:'Name',
              title:'用户名',
              sort:true
            },{
              title:'操作',
              toolbar:'#rowToolBar'
            }
          ]
        ],
        id:'testReload',
        done:function(res,curr,count){
          pData=res.data;
          }
      });
      
      $('#search').on('click',function(){
        var type=$(this).data('type');
        active[type]?active[type].call(this):'';
      });
      //顶部工具栏,toolbar 行内工具栏 tool
      table.on('toolbar(test)',function(data){
        switch (data.event){
          case 'createRole':
              layer.msg("创建用户"); 
            break;
          default:
            break;
        }
      });
      
      table.on('tool(test)',function(res){
      	console.log(res);
        switch (res.event){
          case 'updateRole':
            //打开弹框 编辑 如果是iframe层
            layer.open({
            	title:"更新角色",
            	type:2,
            	content:"updateRole.html",
            	fix: false,
			    maxmin: true,
			    shadeClose: true,
			    area: ['350px', '500px'],
			    success: function(layero, index){// 代表弹出层 成功弹出 调用函数
			     // 或得弹出框页面的body，然后 向文本里面赋值
					let body = layer.getChildFrame('body', index);
				     body.find("#roleId").val(res.data.Id);
					 body.find("#name").val(res.data.Name),
					layui.form.render();// form表单自动渲染
				 }
            })
            
            break;
          case 'deleteRole':
              layer.confirm('确定删除角色'+res.data.Name+'的信息吗？',function(index){
              		console.log(index);
              		//index  >=1   说明点击的时确定按钮
              		if(index >= 1){
              			console.log("-------");
              			$.post(
			            "http://stuapi.ysdjypt.com/api/DeleteRole",
			            {   
			              'token':'23d66d84-fae1-45d5-bd07-b694662fe579',
			              'roleId':res.data.Id
			              },
			            function(res){
			               table.reload('testReload');
			            },"json"
			           );
              		}
              	layer.close(index);//关掉弹出层
              });
            //打开弹框 删除
            break;
          default:
            break;
        }
      });
    });
    </script>
  </body>
</html>